<head>
    <meta charset="utf-8" />
    <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <style>
        body,
        html {
            width: 100%;
            height: 100%;
            overflow: hidden;
            font-family:PingFangSC-Regular,'PingFang';
        }

        body,
        * {
            margin: 0;
            padding: 0;
        }

        video {
            width: 300px;
            height: 225px;
        }

        img {
            max-width: 100%;
            -webkit-touch-callout: none;
        }
        #chartContent{
            position:relative;
        }

        .msg{
            top:0;
            left:0;
            position:absolute;
            display: flex;
            flex-direction: column;
            align-items:center;
            justify-content: center;
            z-index:100;
            visibility: hidden;
        }
        .r1{
            color:#666;
            font-size:12px;
        }
        .r2{
            color:#1dc691;
            font-weight:bold;
            font-size:22px;
        }

        .r2 .text{
            font-size:12px;
            color:#333;
            position:relative;
            top:-2px;
        }
        .r3{
            color:#FF8F2B;
            font-size:14px;
            font-weight:bold;
        }

    </style>

</head>

<body>
    <div id="chartContent">
        <div id="main"></div>
        <!-- <div id="m" class="msg">
            <div class="r1">还可以吃</div>
            <div class="r2">1350<span class="text">千卡</span></div>
            <div class="r3">差额500</div>
        </div> -->
    </div>

    <!-- tm-html组件使用 -->
    <script type="text/javascript" src="./js/echarts.min.js"></script>
    <script type="text/javascript" src="./js/uni.webview.1.5.4.js"></script>
    <script type="text/javascript" src="./js/handler.js"></script>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var option = {
            legend: {
                //top: '5%',
                left: 'center'
            },
            series: [
                //-------------最底群开始---------------
                {
                    type: 'pie',
                    radius: ['73%', '90%'],
                    avoidLabelOverlap: false,
					startAngle: 270,
                    emphasis: {
                        //关闭高亮显示
                        disabled: true
                    },
                    data: [{
                        value: 360,
                        itemStyle: {
                            color: "#F1F1F1",
                            decal: {
                                symbol: 'none'
                            }
                        },
                        label: {
                            show: false
                        }
                    }]
                },
                //-------------热量差开始---------------
				{
                    type: 'pie',
                    radius: ['70%', '95%'],
                    startAngle: 320,
                    emphasis: {
                        disabled: true
                    },
                    data: [{
                            value: 0,
                            itemStyle: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0.1,
                                    x2: 1,
                                    y2: 0.1,
                                    colorStops: [{
                                            offset: 0,
                                            color: "#F3E2D4", // 0% 处的颜色
                                        },
                                        {
                                            offset: 1,
                                            color: "#FFAF68", // 0% 处的颜色
                                        }
                                    ],
                                },
                                shadowColor: 'rgba(0, 0, 0, 0.1)',
                                shadowBlur: 7,
                                borderRadius: "50%",
                                borderColor: '#ffffff',
                                borderWidth: 1
                            },
                            label: {
                                show: false,
                            }
                        },
                        {
                            value: 360,
                            itemStyle: {
                                color: 'none',
                                decal: {
                                    symbol: 'none'
                                }
                            },
                            label: {
                                show: false
                            }
                        }
                    ]
                },
				//-------------摄入开始---------------
				{
					type: 'pie',
					radius: ['68%', '95%'],
					startAngle: 0,
					emphasis: {
					    disabled: true
					},
					data: [{
					        value: -1,
					        itemStyle: {
					            color: {
					                type: 'linear',
					                x: 0,
					                y: 0,
					                x2: 0,
					                y2: 1,
					                colorStops: [{
					                        offset: 0,
					                        color: "#27E2A7", // 0% 处的颜色
					                    },
					                    {
					                        offset: 1,
					                        color: "#E0FDF6", // 0% 处的颜色
					                    }
					                ],
					            },
					            shadowColor: 'rgba(0, 0, 0, 0.1)',
					            shadowBlur: 7,
					            borderRadius: "50%",
					            borderColor: '#ffffff',
					            borderWidth: 1
					        },
					        label: {
					            show: false,
					        }
					    },
					    {
					        value: 360,
					        itemStyle: {
					            color: 'none',
					            decal: {
					                symbol: 'none'
					            }
					        },
					        label: {
					            show: false
					        }
					    }
					]
				}
            ]
        }
		
        let myChart;

        window.createChart = function (w, h, difference,ingest) {
			//console.log(circle)
            chartContent.style.width = w + 'px';
            chartContent.style.height = h + 'px';
            main.style.width = w + 'px';
            main.style.height = h + 'px';
            myChart = echarts.init(document.getElementById('main'));
			option.series[1].data[0].value = difference;
			option.series[1].data[1].value = 360 - difference;
			
			//console.log(ingest)
			
			if(ingest>0){
				if(ingest<25)ingest = 25;
				//if(option.series.length===2)option.series.push(ingestion);
				option.series[2].startAngle = 320 - difference + 10;
				option.series[2].data[0].value = ingest;
				option.series[2].data[1].value = 360 - ingest;
				if(ingest>=360){
					option.series[2].data[0].itemStyle.color.colorStops[0].color = "#FB6957"
					option.series[2].data[0].itemStyle.color.colorStops[1].color = "#FB6957"
					
				}else{
					option.series[2].data[0].itemStyle.color.colorStops[0].color = "#27E2A7"
					option.series[2].data[0].itemStyle.color.colorStops[1].color = "#E0FDF6"
				}
			}else{
				if(option.series.length===3){
					option.series[2].data[0].value = -1;
					option.series[2].data[1].value = 360;
				}
			}
            myChart.setOption(option);
        }
        window.clearChart = function () {
            document.getElementById('main').removeAttribute('_echarts_instance_');
            // m.style.visibility = 'hidden';
            if(myChart){
                myChart.clear();
            }
        }
    </script>
</body>